import {
    init,
    h
} from 'snabbdom'
//导入模块 
import style from 'snabbdom/modules/style'
import eventListeners from 'snabbdom/modules/eventlisteners'

//注册模块
let patch = init([
    style,
    eventListeners
])
//使用h函数的第二个参数传入模块所需要的数据
let vnode = h('div', {
    style: {
        backgroundColor: '#000',
        color: 'rgb(254,255,222)',
        padding: '20px',
        width: "60%",
    },
    on: {
        click: eventHandler
    }
}, [
    h("h1", "Top 10 movies"),
    h("div", {
        style: {
            display: 'flex',
            position: "relative",
        }
    }, [
        h("p", "Sort by :"),
        h("p", {
            style: {
                marginLeft: '10px'
            }
        }, "Rank"),
        h("p", {
            style: {
                marginLeft: '10px'
            }
        }, "title"),
        h("p", {
            style: {
                marginLeft: '10px'
            }
        }, "description"),
        h("button", {
            style: {
                width: "100px",
                height: '40px',
                backgroundColor: "#111",
                color: "#fff",
                border: "0",
                position: "absolute",
                top: "0",
                right: "0"

            }
        }, "add")
    ]),
    h('div', [
        h('div', {
            style: {
                display: "flex",
                border: '1px solid #111'
            }
        }, [
            h("p", {
                style: {
                    width: "10%"
                }
            }, "1"),
            h("p", {
                style: {
                    width: "40%"
                }
            }, "这是第一条数据")
        ], )
    ])
])

function eventHandler() {
    console.log("点击添加")
}

let app = document.querySelector("#app")

patch(app, vnode)